<template>
    <el-dialog
      class="create-node-dialog"
      :visible="showModal"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      width="30%"
    >
    <div slot="title" class="dialog-header">
      <span> 创建节点 </span>
    </div>
      <el-form ref="createNodeform" :model="form" :rules="formRules" label-position="right" label-width="120px" :inline="true">
        <el-row>
          <el-col :span="22" class="add-user-form-left">
            <el-form-item label="名称" prop="node_name">
                <el-input v-model="form.node_name"></el-input>
            </el-form-item>
            <el-form-item label="IP" prop="node_ip">
                <el-input v-model="form.node_ip"></el-input>
            </el-form-item>
            <el-form-item label="类型" prop="node_type">
              <el-select v-model="form.node_type" placeholder="请选择类型">
                <el-option v-for="(item,index) in nodeTypeOptions" :label="item.label" :value="item.value" :key="index"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click.native="closeDialog">关闭</el-button>
      <el-button
        type="primary"
        @click.native="handleSubmit"
      >提交</el-button>
    </div>
    </el-dialog>
  </template>
  <script>
  import { nodeTypeOptions } from '@/business/const'
    export default {
      data(){
        return {
            nodeTypeOptions: nodeTypeOptions,
          // 新增界面数据
          form: {
            node_name: '',
            node_ip: '',
            node_type: ''
          },
          // 新增规则
          formRules: {
            node_name: [
              { required: true, message: '请输入名称', trigger: 'blur' }
            ],
            node_ip: [
              { required: true, message: '请输入IP', trigger: 'blur' }
            ],
            node_type: [
              { required: true, message: '请选择类型', trigger: 'blur' }
            ],
          },
        }
      },
      props: {
        showModal: Boolean
      },
      watch: {
        showModal(newVal){
          if(newVal){
            this.$refs['createNodeform'].resetFields()
          }
        }
      },
      methods: {
        closeDialog(){
          this.$emit('closeDialog')
        },
        handleSubmit(){
          this.$refs.createNodeform.validate((valid) => {
            if (valid) {
              this.$emit('handleDialogSubmit', this.form)
            }
          })
          
        }
      }
    }
  </script>
  <!-- <style lang="scss" scoped>
  ::v-deep .el-dialog__header {
    padding: 20px 20px 20px;
    background: #7e91d5;
    color: #fff;
    font-size: 16px;
    .el-dialog__headerbtn .el-dialog__close {
      color: #fff;
    }
  }
  ::v-deep .el-dialog__footer {
    text-align: center;
  }
  </style> -->
  <style lang="scss" scoped>
@import '@/styles/vars.scss';
.create-node-dialog {
    ::v-deep .el-dialog__header {
      padding: 15px 20px;
      background: rgb(242, 243, 248);
      .el-dialog__title{
        padding-left: 10px;
        border-left: 2px solid $primary-color;
        line-height: 24px;
        font-size: 16px;
        color: #303133;
      }
      .el-dialog__headerbtn {
        top: 14px;
        .el-dialog__close {
          color: #303133;
        }
      }
    }
    ::v-deep .el-dialog__body{
      padding: 20px 20px;
      .title{
        margin-bottom: 20px;
        font-size: 16px;
      }
    }
    ::v-deep .el-dialog__footer {
      text-align: center;
    }
  }

</style>